<template>
 <div class="goods-item" @click="btnDetails">
     <!-- @load监听图片是否加载完了 -->
     <img :src="goodsItem.img1v1Url" alt=""  @load="imageLoad">
     <div class="goods-info">
         <p>{{ goodsItem.name }}</p>
         <span class="photoid">{{ goodsItem.img1v1Id }}</span>
         <span class="id">{{ goodsItem.id }}</span>
     </div>
 </div>
</template>

<script>

export default({
    name:'GoodsListItem',
    props:{
        goodsItem:{
            type:Object,
            dafault(){
                return {}
            }
        }
    },
    methods:{
        imageLoad(){
            //173
            //$bus  事件总线 脚手架4，没有了Vue ，不能使用原型了
            /* 不会用Vuex跳过这个功能了 */
            this.$store.commit('itemImageLoad')
            /* this.$store.dispatch('xxx') */
            /* this.$bus.$emit('itemImageLoad')
            console.log(this.$bus) */  
        },
        btnDetails(){
           this.$router.push('/detail/' + this.goodsItem.id)
            
            /* 获取 歌手 id */
            console.log(this.goodsItem.id)
            /* this.$router.push({
               path:'/detail',
               query:{

               }
           }) */
        }
       
    }
    
})

</script>

<style scoped>
/* 样式以后慢慢调，拿到值就行了 */
    .goods-item{
        padding-bottom: 10px;
        width: 48%;
    }
    .goods-item img{
        width: 100%;
        border-radius: 20px;
    }
    .goods-info{
        font-size: 12px;
        bottom: 5px;
        left: 0;
        right: 0;
        overflow: hidden;
        text-align: center;
    }
    .goods-info p{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        
    }
    .goods-info .photoid{
        color: var(--color-high-text);
        margin-right: 30px;
    }

    .goods-info.id{
        position: relative;
    }

   /*  .goods-info .id::before{
        content: '';
        position: absolute;
        left: 0px;
        top: -1px;
        width: 14px;
        height: 14px;
        background: url("../../../assets/img/common/collect.svg") 0 0/14px 14px;
    } */
</style>
